<template>
    <div>
        <Nav/>
        <div class="container">
                <mu-row gutter>
                    <mu-col span="3">
                        <CenterNav/>
                    </mu-col>
                    <mu-col span="9" class="content">
                        <div class="title">个人信息</div>
                        <div class="right">
                            <mu-button color="primary" @click="edit_mode=!edit_mode">修改信息</mu-button>
                        </div>
                        <div class="main-form" v-if="edit_mode">
                            <form action="">
                                <div class="item">
                                    <input type="text" placeholder="昵称">
                                </div>
                                <div class="item">
                                    <input type="text" placeholder="真实姓名">
                                </div>
                                <div class="btns">
                                    <mu-button color="success" class="queren">确认</mu-button>
                                    <mu-button color="warning" @click="edit_mode=false">取消</mu-button>
                                </div>
                            </form>
                        </div>
                        <div v-else="!edit_mode">
                            <mu-row class="list-item">
                                <mu-col span="3" >
                                    昵称
                                </mu-col>
                                <mu-col span="9">
                                    whh
                                </mu-col>
                            </mu-row>
                            <mu-row class="list-item">
                                <mu-col span="3">
                                    真实姓名
                                </mu-col>
                                <mu-col span="9">
                                    王华华
                                </mu-col>
                            </mu-row>
                        </div>
                    </mu-col>
                </mu-row>

        </div>
        <Footer/>
    </div>
</template>

<script>
    import Nav from '../components/Nav.vue'
    import Footer from '../components/Footer.vue'
    import CenterNav from '../components/CenterNav.vue'

    export default{
        components:{
            Nav,
            Footer,
            CenterNav
        },
        data () {
            return {
                edit_mode:false,
            }
        }
    }
    
</script>

<style scoped>
    .content{
        background-color: #f8f8f8;
        margin-top: 20px;
        /* height: 193px; */
        margin-bottom: 20px;
    }
    .list-item{
        padding: 20px;
    }
    .right{
        text-align: right;
    }

    .title{
        text-align: center;
        margin-top: 10px;
        padding: 10px;
        font-weight: lighter;
        font-size: 25px;
    }

    .queren{
        margin-right: 10px;
    }

    .item{
        padding: 10px;
        width: 300px;
        margin: 0 auto;
    }

    .item input{
        width: 300px;
    }

    .main-form{
        text-align: center;
        margin-bottom: 30px;
    }

    .btns{
        margin-top: 10px;
    }

</style>